<template>
  <div>
    <el-form :inline="true" style="width: 100%;margin-bottom: -10px;margin-top: -10px;" label-width="80px">
      <el-form-item>
        <el-button size="mini" icon="el-icon-back" type="success" @click="returnRoomChange">考场管理</el-button>
      </el-form-item>
      <el-form-item>
        <el-input size="mini" v-model="requestData.map.ep_name" style="width: 200px;" placeholder="考卷标题"></el-input>
        <el-select v-model="state" placeholder="考试状态" size="mini">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button size="mini" type="primary" @click="searchInfoData">查询</el-button>
        <el-button size="mini" @click="restartInfoData">重置</el-button>
      </el-form-item>
      <el-form-item>
        <el-button size="mini" type="info" @click="addTestPaper">下发考卷</el-button>
      </el-form-item>
      <el-form-item>
        <div>
          <el-tag type="success" style="font-size: 15px;">
            <label style="color: black">考场名称:</label><label>{{testRoomData.tr_name}}</label>&nbsp;&nbsp;&nbsp;
            <label style="color: black">考卷数:</label><label>{{testRoomData.roomPaperNum}}</label>&nbsp;&nbsp;&nbsp;
            <label style="color: black">人数:</label><label>{{testRoomData.userNum}}</label>&nbsp;&nbsp;&nbsp;
            <label style="color: black">创建时间:</label><label>{{testRoomData.tr_time|timeFilter}}</label>
          </el-tag>
        </div>
      </el-form-item>
    </el-form>
    <el-row :gutter="20" :span="24">
      <!--试题信息-->
      <el-col :span="12">
        <div class="block">
          <el-timeline>
            <template v-for="obj in roomPaperList">
              <el-timeline-item :timestamp="obj.rp_time|timeFilter" placement="top" color="#0bbd87">
                <el-card>
                  <h3>{{obj.examinationPaper.ep_name}}</h3>
                  <p style="margin-top: 25px;">{{obj.examinationPaper.ep_describe}}</p>
                  <div style="margin-top: 15px;">
                    <label>总分:<label style="color: green;">{{obj.examinationPaper.ep_fraction}}</label></label>
                    <label style="margin-left: 35px;">时间(分钟):<label style="color: green;">{{obj.examinationPaper.ep_test_time}}</label></label>
                    <label style="margin-left: 35px;">考试状态:<label>
                      <el-tag v-if="obj.rp_state == 0" size="mini">未开始</el-tag>
                      <el-tag type="success" v-if="obj.rp_state == 1" size="mini">进行中</el-tag>
                      <el-tag type="info" v-if="obj.rp_state == 2" size="mini">已结束</el-tag>
                    </label></label>
                  </div>
                  <div style="margin-top: 15px;">
                    <label>开始时间:<label style="color: grey;">{{obj.ep_start_time|timeFilter}}</label></label>
                    <label style="margin-left: 30px;">结束时间:<label style="color: grey;">{{obj.ep_end_time|timeFilter}}</label></label>
                  </div>
                  <div style="margin-top: 15px;">
                      <el-button v-if="obj.rp_state == 0" plain size="mini" @click="editRoomPaperInfo(obj)">编辑</el-button>
                      <el-button type="success" plain size="mini" @click="lookExamination(obj)">查看考卷</el-button>
                      <el-button v-if="obj.rp_state != 0" type="primary" plain size="mini" @click="scoreStatistics(obj)">成绩统计</el-button>
                      <el-button v-if="obj.rp_state != 0" type="info" plain size="mini" @click="lookScoreStatistics(obj)">成绩单</el-button>
                      <el-button v-if="obj.rp_state != 1" type="warning" plain size="mini" @click="deleteRoomPaperExamination(obj)">删除</el-button>
                  </div>
                </el-card>
              </el-timeline-item>
            </template>
          </el-timeline>
        </div>
      </el-col>
      <!--成绩查看-->
      <el-col :span="12" v-if="lookScore.isShowLookScore">
        <el-timeline-item timestamp="成绩分析" placement="top" color="green">
          <el-card>
            <div style="text-align: center">
              <h4>{{lookScore.title}}</h4>
              <p>{{lookScore.desc}}</p>
            </div>
            <div class="chart" ref="myEchartPillar" style="height:280px;">

            </div>
          </el-card>
        </el-timeline-item>
        <el-timeline-item placement="top" color="green" style="margin-top: -20px;">
          <el-card>
            <div style="text-align: center">
            </div>
            <div id="tonJiTable">
               <el-table  :data="tableData" style="width: 100%">
                 <el-table-column align="center" label="考试人数" prop="peopleNum"></el-table-column>
                 <el-table-column align="center" label="单选题平均分" prop="choose"></el-table-column>
                 <el-table-column align="center" label="多选题平均分" prop="chooses"></el-table-column>
                 <el-table-column align="center" label="判断题平均分" prop="judgment"></el-table-column>
                 <el-table-column align="center" label="填空题平均分" prop="fillBanks"></el-table-column>
                 <el-table-column align="center" label="平均分" prop="score"></el-table-column>
               </el-table>
            </div>
          </el-card>
        </el-timeline-item>
      </el-col>
    </el-row>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[3, 5]"
      :page-size="pageInfo.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total">
    </el-pagination>
    <edit-room-paper v-if="isShowRoomPaperDialog" :isShowRoomPaperDialog="isShowRoomPaperDialog" :roomPaperInfo="roomPaperInfo" @closeDialog="closeDialog"></edit-room-paper>
  </div>
</template>
<script>
  import{selectTestRoomById,selectRoomPaperByTrId,updateRoomPaper,deleteRoomPaper,addRoomPaper,getRefererInfo,getScoreStatistics} from '@/api/invigilate'
  import editRoomPaper from './editRoomPaper.vue';
  export default{
    components: {
      editRoomPaper
    },
    created(){
        this.getTestRoomData();
        this.getRoomPaper();
    },
    data(){
          return {
              testRoomData:{},
              roomPaperList:[],

              state:'',

              isDisableTrue:true,
              isDisableFalse:false,

              tableData:[],

              lookScore:{
                  title:"更新 Github 模板",
                  desc:"王小虎 提交于 2018/4/2 20:46",
                 isShowLookScore:false
              },
              isShowRoomPaperDialog:false,
              roomPaperInfo:null,

              options:[
                {label:"未开始",value:0},
                {label:"进行中",value:1},
                {label:"已结束",value:2}
              ],

              pageInfo:{
                page:1,//页数
                size:3, //页面大小
                total:0 //页总数
              },
              requestData:{
                pageSize:3,
                pageNum:1,
                map:{
                  tr_id:parseInt(this.$route.params.id),
                  ep_name:"",
                  rp_state:-1,
                }
              }
          }
      },

      filters:{
          timeFilter(time){
              if(typeof time === "string"){
                return time.substr(0,time.length  -2);
              }
              return time;
          }
      },

      methods:{
        //获取考场信息
        getTestRoomData(){
          selectTestRoomById({tr_id:parseInt(this.$route.params.id)}).then(res=>{
              if(res.code == 200){
                //console.log(res);
                this.testRoomData = res.data;
              }
          })
        },

        //查询考场中的考题信息
        getRoomPaper(){
          if(this.state == ''){
            this.requestData.map.rp_state = -1;
          }else{
            this.requestData.map.rp_state = parseInt(this.state);
          }
          selectRoomPaperByTrId(this.requestData).then(res=>{
              if(res.code == 200){
                //console.log(res);
                this.roomPaperList = res.data.data;
                this.pageInfo.total = res.data.total;
              }
          })
        },

        //下发考卷
        addTestPaper(){
          this.$router.push({ path: '/invigilate/examinationPaper/volumeChange',query:{type:"add",id:this.$route.params.id}});
        },

        //编辑考场信息
        editRoomPaperInfo(obj){
          this.roomPaperInfo = obj;
          this.roomPaperInfo.type="edit";
          this.isShowRoomPaperDialog = true
        },

        //查看考卷
        lookExamination(obj){
          this.$router.push({ path: '/invigilate/examinationPaper/component/lookExaminationPaper',query:{ep_id:obj.ep_id,type:"iLook",id:parseInt(this.$route.params.id)}});
        },

        //查看成绩单
        lookScoreStatistics(obj){
           this.$router.push({path:"/invigilate/examinationRoom/component/ScoreStatistics",query:{rp_id:obj.rp_id,id:parseInt(this.$route.params.id)}});
        },

        //成绩统计
        scoreStatistics(obj){
            this.lookScore.title = obj.examinationPaper.ep_name;
            this.lookScore.desc = obj.examinationPaper.ep_describe;
            this.lookScore.isShowLookScore = true;
            getRefererInfo({rp_id:obj.rp_id}).then(res=>{
                if(res.code == 200){
                    let chartData = res.data;
                    let myChart = this.$echarts.init(this.$refs.myEchartPillar);
                    myChart.setOption(this.myOptions(chartData));
                }
            });

            getScoreStatistics({rp_id:obj.rp_id}).then(res=>{
                if(res.code == 200){

                    this.tableData = [res.data];
                }
            })
        },

        myOptions(data){
          let option = {
            title: {
              text: '',
              subtext: '',
              left: 'center'
            },
            tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
              orient: 'vertical',
              left: 'left',
              data: ['0到59分人数', '60到69分人数', '70到79分人数', '80到89分人数', '90分及以上人数']
            },
            series: [
              {
                name: '成绩统计',
                type: 'pie',
                radius: '55%',
                center: ['50%', '60%'],
                data: data,
                emphasis: {
                  itemStyle: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
                }
              }
            ]
          };
          return option;
        },

        //考场中删除考卷
        deleteRoomPaperExamination(obj){
          this.$confirm('此操作将删除该条数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            deleteRoomPaper(obj).then(res=>{
                if(res.code === 200){
                  this.$message({
                    message: '删除成功',
                    type: 'success'
                  });
                  this.getRoomPaper();
                }
            })
          }).catch(() => {

          });
        },

        searchInfoData(){
          this.getRoomPaper();
        },

        restartInfoData(){
          this.requestData.map.ep_name = "";
          this.requestData.map.rp_state = -1;
          this.state = "";
          this.getRoomPaper();
        },

        closeDialog(type){
           if(type == "closeRoomPaper"){
               this.isShowRoomPaperDialog = false;
               this.getRoomPaper();
           }
        },

        returnRoomChange(){
          this.$router.push({ path: '/invigilate/examinationRoom/examinationRoom'});
        },

        //每页的条数发生改变时调用
        handleSizeChange(size){
          this.requestData.pageSize = size;
          this.pageInfo.size = size;
          this.getRoomPaper();
        },

        //页数发生改变时调用
        handleCurrentChange(page){
          this.requestData.pageNum = page;
          this.pageInfo.page = page;
          this.getRoomPaper();
        },
      }
  }
</script>
<style scoped>
  #tonJiTable div >>> div .el-table__header{
    font-size: 12px;
  }
</style>
